<template name="avatarService">
	<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar" aria-label="{{name}}">
		{{#if suggestion}}
			{{> avatar url=suggestion.blob}}
		{{/if}}
		{{#if service}}
			<div class="rc-select-avatar__upload-label avatar">
				{{> icon block="rc-select-avatar__upload-icon" icon=name.toLowerCase }}
			</div>
		{{/if}}
	</div>
</template>
<template name="accountProfile">
	<section class="preferences-page preferences-page--new">
		{{#header sectionName="Profile" buttons=true fullpage=true}}
			<div class="rc-header__section-button">
				<button class="rc-button rc-button--primary" name="send" type="submit" data-button="create" form="profile" {{canSave 'disabled'}}>{{_ "Save_changes"}}</button>
			</div>
		{{/header}}
		<div class="preferences-page__content">
			<form id="profile" autocomplete="off" class="container">
				<fieldset class="rc-form-legend">
					<legend style="margin-bottom: 2.5rem;">{{_ "Profile_details"}}</legend>
					<div>
						<div class="rc-form-group">
							<label class="rc-form-label">{{_ "Profile_picture"}}</label>
							<div class="rc-select-avatar">
									<div class="rc-select-avatar__preview">
									{{# unless avatarPreview}}
											{{> avatar username=username}}
									{{else}}
											{{> avatar url=avatarPreview.blob}}
									{{/unless}}
								</div>
									{{#if allowAvatarChange}}
										<div class="rc-select-avatar__list">
											<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-initials" aria-label="{{_ "initials_avatar" }}">
												{{> avatar username=initialsUsername }}
											</div>
											<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-upload" aria-label="{{_ "Upload_user_avatar" }}">
												<label class="rc-select-avatar__upload-label avatar" for="upload-avatar">
													{{> icon block="rc-select-avatar__upload-icon" icon="upload"}}
												</label>
												<input type="file" name="" value="" id="upload-avatar" style="display:none;" accept="image/x-png,image/gif,image/jpeg,image/svg+xml">
											</div>
											<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-url {{selectUrl}}"	aria-label="{{_ "Use_url_for_avatar" }}">
												<label class="rc-select-avatar__upload-label avatar">
													{{> icon block="rc-select-avatar__upload-icon" icon="permalink"}}
												</label>
											</div>
											{{#if suggestions.ready}}
												{{#each service in services}}
													{{ > avatarService service}}
												{{/each}}
											{{else}}
												<div class="rc-select-avatar__loading">
													{{_ "Loading_suggestion"}}
												</div>
											{{/if}}
											<div class="rc-input">

												<label class="rc-input__label">
													<div class="rc-input__title">{{_ "Use_url_for_avatar"}}</div>
													<div class="rc-input__wrapper">
														<input name="avatar_url" class="rc-input__element js-avatar-url-input" placeholder="{{_ "Use_url_for_avatar"}}">
													</div>
												</label>
											</div>
										</div>
									{{/if}}
							</div>
						</div>
						<div class="rc-form-group rc-grid">
							{{# with canChange=allowRealNameChange}}
							<div class="rc-input rc-w50 padded {{#if nameInvalid}}rc-input--error{{/if}}">
								<label class="rc-input__label">
									<div class="rc-input__title">{{_ "Name"}}</div>
									<div class="rc-input__wrapper">
										<input type="text" class="rc-input__element" name="realname" id="realname" placeholder="{{_ "Name_Placeholder" }}" value="{{realname}}" {{ifThenElse canChange '' 'disabled'}}>
									</div>
								</label>
								{{# unless canChange}}
									<div class="rc-input__description">{{_ 'RealName_Change_Disabled'}}</div>
								{{/unless}}
							</div>
							{{/with}}
							{{# with canChange=allowUsernameChange}}
							<div class="rc-input rc-w50 padded {{#if usernameInvalid}}rc-input--error{{/if}} {{#unless usernameAvaliable}}rc-input--error{{/unless}}">
								<label class="rc-input__label">
									<div class="rc-input__title">{{_ "Username"}}</div>
									<div class="rc-input__wrapper">
										<div class="rc-input__icon">
											{{> icon block="rc-input__icon-svg" icon="at"}}
										</div>
										<input type="text" class="rc-input__element" name="username" id="username" placeholder="{{_ "Username_Placeholder" }}" value="{{username}}" {{ifThenElse canChange '' 'disabled'}}>
									</div>
								</label>
								{{# unless canChange}}
									<div class="rc-input__description">{{_ 'Username_Change_Disabled'}}</div>
								{{/unless}}
								{{#unless usernameAvaliable}}
									<div class="rc-input__error">
										<div class="rc-input__error-icon">
											{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
										</div>
										<div class="rc-input__error-message">{{_ "Username_already_exist"}}</div>
									</div>
								{{/unless}}
							</div>
							{{/with}}
						</div>
						<div class="rc-form-group rc-grid">
							{{# with canChange=allowStatusMessageChange}}
								<div class="rc-input rc-w100 padded {{#if statusMessageInvalid}}rc-input--error{{/if}}">
									<label class="rc-input__label">
										<div class="rc-input__title">{{_ "StatusMessage"}}</div>
										<div class="rc-input__wrapper">
											<div class="rc-input__icon">
												{{> icon block="rc-input__icon-svg" icon="edit"}}
											</div>

											<input type="text" class="rc-input__element" maxlength="120" name="statusText" id="statusText" placeholder="{{_ "StatusMessage_Placeholder" }}" value="{{get 'statusText'}}" {{ifThenElse canChange '' 'disabled'}}>
										</div>
									</label>
									{{# unless canChange}}
										<div class="rc-input__description">{{_ 'StatusMessage_Change_Disabled'}}</div>
									{{/unless}}
								</div>
							{{/with}}
						</div>
						<div class="rc-form-group">
							<div class="rc-input rc-w100 padded">
								<label class="rc-input__label">
									<div class="rc-input__title">{{_ "Bio"}}</div>
									<div class="rc-input__wrapper">
										<textarea type="text" class="rc-input__element" name="bio" id="bio" maxlength="260" rows="4" style="height: auto" placeholder="{{_ "Bio_Placeholder" }}" value="{{get 'bio'}}"></textarea>
									</div>
								</label>
							</div>
						</div>
						<div class="rc-form-group rc-grid">
							{{#with canChange=allowEmailChange}}
							<div class="rc-input rc-w50 padded {{#if emailInvalid}}rc-input--error{{/if}}">
								<label class="rc-input__label">
									<div class="rc-input__title">{{_ "Email"}}</div>
									<div class="rc-input__wrapper">
										<input name="email" type="text" class="rc-input__element" placeholder="{{_ "Email_Placeholder" }}" value="{{email}}" autocomplete="false" {{ifThenElse canChange '' 'disabled'}}>
										{{#unless emailVerified}}
											<div class="rc-input__icon rc-input__icon--right">
												{{> icon block="rc-input__icon-svg" icon="circle-cross"}}
											</div>
										{{else}}
											<div class="rc-input__icon rc-input__icon--right">
												{{> icon block="rc-input__icon-svg" icon="checkmark-circled"}}
											</div>
										{{/unless}}
									</div>
								</label>
								{{#unless canChange}}
									<div class="rc-input__description">{{_ 'Email_Change_Disabled'}}</div>
								{{/unless}}
								{{#unless emailVerified}}
									<div class="rc-input__error">
										<button class="rc-button rc-button--small" id="resend-verification-email">{{_ "Resend_verification_email"}}</button>
									</div>
								{{/unless}}
							</div>
							{{/with}}
							<div class="rc-input{{#if confirmationPasswordInvalid}} rc-input--error{{/if}} rc-w50 padded">
								{{#with canChange=allowPasswordChange}}
									<label class="rc-input__label">
										<div class="rc-input__title">{{_ "New_password"}}</div>
										<div class="rc-input__wrapper">
											<input name="password" type="password" class="rc-input__element" placeholder="{{_ "New_Password_Placeholder"}}"  autocomplete="new-password" {{ifThenElse canChange '' 'disabled'}}>
										</div>
									</label>
									{{#if canConfirmNewPassword}}
									<label class="rc-input__label">
										<div class="rc-input__title">{{_ "Confirm_new_password"}}</div>
										<div class="rc-input__wrapper">
											<input name="confirmation-password" type="password" class="rc-input__element" placeholder="{{_ "Confirm_New_Password_Placeholder"}}" autocomplete="confirm-new-password">
										</div>
									</label>
									{{/if}}
									{{# unless canChange}}
										<div class="rc-input__description">{{_ 'Password_Change_Disabled'}}</div>
									{{/unless}}
									{{#if confirmationPasswordInvalid}}
										<div class="rc-input__error">
											<div class="rc-input__error-icon">
												{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
											</div>
											<div class="rc-input__error-message">{{_ 'Passwords_do_not_match'}}</div>
										</div>
									{{/if}}
								{{/with}}
							</div>
						</div>
					</div>
				</fieldset>
				<fieldset>
					<!-- <legend style="margin-bottom: 2.5rem;">Custom Fields</legend> -->
					{{> customFieldsForm hideFromForm=false formData=customFields new=true}}
				</fieldset>
				<div class="rc-form-group rc-grid">
					<div class="rc-input rc-w50 padded">
						<button class="rc-button js-logout">{{_ "Logout_Others"}}</button>
					</div>
					{{#if allowDeleteOwnAccount}}
					<div class="rc-input rc-w50 padded">
						<button class="rc-button rc-button--red js-delete-account"><i class="icon-trash"></i><span>{{_ "Delete_my_account"}}</span></button>
					</div>
					{{/if}}
				</div>
			</form>

			<!-- <div class="rocket-form">
				<button class="button" id="resend-verification-email">{{_ "Resend_verification_email"}}</button>
			</div> -->
		</div>
	</section>
</template>
